<style scoped lang="less">
.el-button--text{
    font-size: 12px;
}
.page-num{
    padding: 0 10px;
    font-size: 12px;
    b{
        font-weight: bold;
        font-size: 14px;
    }
}
</style>
<template>
    <div class="flex v-c h-c">
        <el-button type="text" :disabled="pageNum==1" @click="prevPage">上一页</el-button>
        <span class="page-num"><b>{{pageNum}}</b>/{{totalPage}}</span>
        <el-button type="text" :disabled="totalPage<pageSize" @click="nextPage">下一页</el-button>
    </div>
</template>
<script>
export default {
    name: 'pagination',
    props: {
        currentPage:{
            type: Number,
            default: 1
        },
        pageSize: {
            type: Number,
            default: 10
        },
        total: {
            type: Number,
            default: 0
        }
    },
    watch: {
        pageNum (value) {
            this.$emit('change',value)
        }
    },
    computed: {
        totalPage () {
            return Math.ceil(this.total/this.pageSize)
        }
    },
    data () {
        return {
            pageNum: this.currentPage
        }
    },
    methods: {
        prevPage () {
            this.pageNum --
        },
        nextPage () {
            this.pageNum ++ 
        }
    }
}
</script>